---
import { getCollection } from 'astro:content'

import BaseHead from '@/components/BaseHead.astro'
import FormattedDate from '@/components/FormattedDate.astro'

const posts = (await getCollection('blog')).sort(
  (a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf(),
)
---

<!doctype html>
<html lang='en'>
  <head>
    <BaseHead />
  </head>
  <body>
    <main>
      <section>
        <ul>
          {
            posts.map((post) => (
              <li>
                <a href={`/blog/${post.slug}/`}>
                  <img
                    width={720}
                    height={360}
                    src={post.data.heroImage}
                    alt=''
                  />
                  <h4 class='title'>{post.data.title}</h4>
                  <p class='date'>
                    <FormattedDate date={post.data.pubDate} />
                  </p>
                </a>
              </li>
            ))
          }
        </ul>
      </section>
    </main>
  </body>
</html>
